<template>
<div class="searchDiv">
  <div class="searchInputDiv">
    <div class="searchInput">
      <div>
        <img src="/static/images/goods/setsearch.png"> 
      </div>
      <input type="search" @confirm="searchConfirm" placeholder="搜索产品名字" v-model="searchTxt" />
      <div class="clearInputSearch" v-if="showCancel" @click="clearInput()">
        <div><img src="/static/images/goods/clearsearch.png"> </div>
      </div>
    </div>
  </div>
  <div class="searchContainer" v-if="searchlist.length>0">
    <search-item :searchList="searchlist"></search-item>
  </div>
  <div v-else class="lackCollectPage">
    <div class="lackCollectTxt">
      <div><img src="/static/images/lack/lackSearch.png"></div>
      <p>暂无相关商品~</p>
    </div>
  </div>
</div>
</template>

<script>
  import searchItem from '@/components/search/search-item'
  export default {
    components: {
      searchItem
    },
    data() {
      return {
        searchTxt: '',
        showCancel: false,
        searchlist: [],
      }
    }, 
    watch:{
      searchTxt(val){
        if(val){
          this.showCancel = true
        }else{
          this.showCancel = false
        }
      }
    },
    methods: {
      searchConfirm(){
        if(this.searchTxt && this.searchTxt.trim() !=""){
          this.showCancel = true
          let searchVal = this.searchTxt.trim()
          this.$http.get(`products/seek/${searchVal}`,{},'application/json').then((res)=>{ 
            console.log(res)
            if(res.data.data){
              this.searchlist = res.data.data
            }else{
              this.searchlist = []
              this.wxAlert(res.data.msg)
            }
          })
        }else{
          this.showCancel = false
          this.wxAlert("输入不能为空")
        }
      },
      clearInput(){
        this.showCancel = false
        this.searchTxt = ''
      },
      wxAlert(txt){
        wx.showToast({
          title: txt,
          icon: "none",
          duration: 2000,
          mask: true
        })    
      }
    }
  }
</script>

<style scoped>
.searchDiv{
  background: #efeff4;
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
}
.searchInputDiv{
  position: fixed;
  top: 0;
  z-index: 5;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.searchInputDiv .searchInput{
  flex: 1;
  display: flex;
  align-items: center;
  background: #efeff4;
  padding-left: 15rpx;
  margin: 10rpx 30rpx;
  border-radius: 15rpx;
}
.searchInputDiv .searchInput input{
  flex: 1;
  height: 60rpx;
  line-height: 60rpx;
  padding-left: 15rpx;
  border: none;
  font-size: 28rpx;
}
.searchInputDiv .searchInput div{
  width: 32rpx;
  height: 32rpx;
  display: block;
}
.searchInputDiv .searchInput div img{
  width: 100%;
  height: 100%;
  display: block;
}
.searchInputDiv .searchInput div.clearInputSearch{
  width: 62rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.searchInputDiv .searchInput div.clearInputSearch div{
  width: 32rpx;
  height: 32rpx;
}
.searchInputDiv .searchInput div.clearInputSearch div img{
  width: 100%;
  height: 100%;
  display: block;
}
.searchContainer{
  padding-top: 80rpx;
}
.lackCollectPage{
  width: 100%;
  height: 100%;
  margin-top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lackCollectPage .lackCollectTxt div{
  width: 140rpx;
  height: 156rpx;
  margin: 0 auto;
}
.lackCollectPage .lackCollectTxt div img{
  width: 100%;
  height: 100%;  
}
.lackCollectPage .lackCollectTxt p{
  text-align: center;
  font-size: 30rpx;
  color: #adadad;
  margin-top: 25rpx;
}
</style>
